<template>
  <div class="chat">
    <van-nav-bar title="小易同学" left-arrow @click-left="$router.back()" />

    <!-- 聊天内容区域 -->
    <div ref="chat" class="content">
      <div class="item" v-for="(item, index) in chatList" :key="index">
        <van-image
          class="img"
          fit="cover"
          round
          width="40"
          height="40"
          :src="require('@/assets/girl.png')"
          :class="{ right: item.isme }"
        />
        <div class="txt" :class="{ right: item.isme }">
          {{ item.t }}
        </div>
      </div>
      <!-- <div class="item">
        <van-image
          class="img right"
          fit="cover"
          round
          width="40"
          height="40"
          src=""
        />
        <div class="txt right">
          生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且
          生活不止眼前的苟且生活不止眼前的苟且生活不止眼前的苟且
        </div>
      </div> -->
    </div>

    <!-- 底部输入框 -->
    <van-search
      ref="ipt"
      class="input"
      v-model="msg"
      show-action
      left-icon=""
      placeholder="说点什么"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">提交</div>
      </template>
    </van-search>
  </div>
</template>

<script>
import io from "socket.io-client";
export default {
  data() {
    return {
      msg: "",
      chatList: [{ isme: false, t: "您好啊！" }],
      socket: null,
    };
  },

  methods: {
    onSearch() {
      if (this.msg) {
        this.socket.emit("message", {
          msg: this.msg,
          timestamp: Date.now(),
        });
        this.chatList.push({
          isme: true,
          t: this.msg,
        });
        this.msg = "";
        this.$nextTick(() => {
          // 滚动到最后面
          this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
        });
      }
    },
  },

  created() {
    // 建立服务器的连接
    this.socket = io("http://toutiao.itheima.net", {
      query: {
        token: this.$store.state.token.token,
      },
      transports: ["websocket"],
    });
    // 收消息
    this.socket.on("message", (data) => {
      // 将内容添加到聊天列表中
      this.chatList.push({
        isme: false,
        t: data.msg,
      });
      // 自动滚动到底部
      this.$nextTick(() => {
        // 滚动到最后面
        this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
      });
    });
  },
};
</script>

<style lang="less">
.chat {
  font-size: 16px;
  .van-nav-bar__title.van-ellipsis {
    color: #fff;
  }
  i.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
  .input {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
  }
  .content {
    position: fixed;
    top: 46px;
    bottom: 54px;
    left: 0;
    right: 0;
    background-color: #eee;
    overflow: auto;
    .item {
      overflow: hidden;
      margin: 10px;
      .img {
        float: left;
        margin-right: 10px;
      }
      .txt {
        float: left;
        border: 1px solid #3196fa;
        max-width: 70%;
        padding: 10px;
        background-color: #e0effb;
      }
      .right {
        margin-right: 0px;
        margin-left: 10px;
        float: right;
        border: 1px solid #c5e2d4;
        background-color: #9eea6a;
      }
    }
  }
}
</style>